<template>
  <div class="dhp">
    <header>
      <img src="http://imgcon.tea7.com/6363865086046441694910085.jpg" alt="" />
      <img src="http://imgcon.tea7.com/6363865086055818163938269.jpg" alt="" />
    </header>
    <ul>
      <img :src="adList.img" alt="" />
      <li v-for="item in adList.data" :key="item.id">
        <img :src="item.imgUrl" alt="" />
      </li>
    </ul>
    <ul class="list">
        <img :src="adList.listImg" alt="">
        <li v-for="item in adList.dataList" :key="item.id">
           <div class="item">
                <img :src="item.imgUrl" alt="">
                <h2>{{item.title}}</h2>
                <div class="rec">{{item.recommend}}</div>
                <div class="price">
                    <div class="price-l">
                        ￥
                        <b>{{item.price}}</b>
                    </div>
                    <div class="price-r">
                        <span>去购买</span>
                    </div>
                </div>
           </div>
        </li>
    </ul>
   <footer>
    <ul>
        <li v-for="item in adList.imgList" :key="item.id">
            <img :src="item.imgUrl" alt="">
        </li>
    </ul>
   </footer>
  </div>
</template>

<script>
export default {
  props: ["adList"],
  mounted() {
    console.log(this.adList);
  },
};
</script>

<style lang="less" scoped>
.dhp {
    width: 100%;
    margin-top: 5.75rem;
    margin-bottom:47px ;
    img {
      width: 100%;
      border: 0;
      vertical-align: middle;
    }
    .list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 15px 5px;
        li {
            text-align: center;
            width: 48%;
            background: #f9f8f6;
            margin: 1%;
            .item {
                border: 1px solid #89c997;
                img {
                    width: 9.25rem;
                    padding: 5px;
                }
                h2 {
                    color: #357133;
                    text-align: center;
                    font-size: .875rem;
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding: 0 5px;
                }
                .rec {
                        color: #666666;
                        text-align: center;
                        padding-bottom: 5px;
                        border-bottom: 1px dashed #89c997;
                        margin: .4688rem;
                        font-size: .8125rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                }
                .price {
                    display: flex;
                    justify-content: space-between;
                    color: #cb3c38;
                    padding: 0 10px 10px;
                    .price-l {
                        font-weight: bold;
                        height: 24px;
                        line-height: 24px;
                        font-size: 14px;
                        b {
                            font-size: 20px;
                        }
                    }
                    .price-r {
                        text-align: center;
                        color: #fff;
                        background: #cb3c38;
                        position: relative;
                        height: 24px;
                        line-height: 24px;
                        display: block;
                        padding: 0 0.25rem;
                        border-radius: 15px;
                    }
                }
            }
        }
    }
}
</style>